import { getUserInfo } from '@/utils/user';
import { getModelData } from '@/utils/utils';
import { Avatar, Tooltip } from 'antd';
import classnames from 'classnames';
import { ProfileCard } from 'gantd';
import React, { useState, useEffect } from 'react';
import { history } from 'umi';
import fields from './fields';
import styles from './styles.less';
import { getUserInfoAsync } from '@/utils/user';
import { getAvatar } from '@/utils/user';
export interface UserColumnProps {
  id?: string;
  userLoginName?: string;
  tigger?: string;
  wrapperStyle?: React.CSSProperties;
  overlayClassName?: string;
  showContactBtns?: boolean; //是否显示卡片底部联系栏
  showUserLoginName?: boolean; //是否显示userLoginName
  children?: (userInfo: any) => React.ReactElement;
}

const UserColumn = (props: UserColumnProps) => {
  const {
    id = '',
    userLoginName = '',
    tigger = 'click',
    overlayClassName,
    wrapperStyle,
    showContactBtns: _showContactBtns = true,
    children,
    showUserLoginName = false,
    ...restProps
  } = props;
  const config = getModelData('config');
  const { COMMON_CONFIG } = config;
  const showContactBtns = COMMON_CONFIG.showContactBtns ? _showContactBtns : COMMON_CONFIG.showContactBtns;

  const [userInfo, setUserInfo] = useState<any>({});

  const { userName = '', avatarUrl = '', userLoginName: _userLoginName } = userInfo || {};

  const onClick = async () => {
    //在点击时一定能拿到当前的用户信息
    const user = getUserInfo(id, userLoginName);
    setUserInfo(user);
  };

  //如果是新用户，baseUserInfo 为空，但是会发起一个异步task
  useEffect(() => {
    (async () => {
      if (!id && !userLoginName) {
        return;
      }
      const baseUserInfo = await getUserInfoAsync(id, userLoginName);
      const avatarUrl = getAvatar(baseUserInfo);
      setUserInfo({ ...baseUserInfo, avatarUrl });
    })();
  }, [id, userLoginName]);

  return (
    <>
      {!_.isEmpty(userInfo) ? (
        <div style={{ display: 'inline-block', ...wrapperStyle }} onClick={(e) => e.stopPropagation()}>
          <ProfileCard
            data={userInfo}
            overlayClassName={
              showContactBtns ? classnames(styles.userProfiedOverlay, overlayClassName) : overlayClassName
            }
            fields={fields}
            // height={200}
            backgroundBlur={false}
            backgroundImage={false}
            avatarAlign="left"
            trigger={tigger}
            layout={{
              labelCol: { span: 8 },
              wrapperCol: { span: 16 },
            }}
            placement="right"
            extraBottom={<></>}
            onAvatarClick={() => {
              history.push(`/common/user/detail/${userInfo.id}`);
            }}
            {...restProps}
          >
            {children ? (
              children(userInfo)
            ) : (
              <a href="javascript:void(0)" onClick={onClick}>
                {avatarUrl && <Avatar size={16} icon="user" src={avatarUrl} style={{ marginRight: '10px' }} />}
                {userName}
                {showUserLoginName ? `-${_userLoginName}` : ''}
              </a>
            )}
          </ProfileCard>
        </div>
      ) : (
        <Tooltip title={tr('点击以获取最新')}>
          <a href="javascript:void(0)" onClick={onClick}>
            {userLoginName}
          </a>
        </Tooltip>
      )}
    </>
  );
};

export default UserColumn as any;
